<template>
	<tm-fullView>
		<template v-slot:default="{info}">
			<view class="grey text " :class="$tm.vx.state().tmVuetify.black?'black bk':''" :style="{minHeight:info.height+'px'}">
				<tm-menubars title="头像框" color="bg-gradient-blue-accent"  :showback="true"></tm-menubars>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">基本示例</view>
					<tm-avatar ></tm-avatar>
					<tm-avatar titl></tm-avatar>
					<tm-avatar text dot :shadow="4" label="习"></tm-avatar>
					<tm-avatar outlined dot :shadow="4" label="习"></tm-avatar>
					<tm-avatar  dot :shadow="4" label="习"></tm-avatar>
					<tm-avatar dot color="bg-gradient-pink-accent" titl label="习"></tm-avatar>
					
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">其它组件应用</view>
					
					<tm-listitem  @click="hcangeimg" :margin="[0,32]"  title="用户信息" value="点击修改" :show-left-icon="true" >
						<template v-slot:left>
							<tm-avatar :src="avatrUrl" :size="60" ></tm-avatar>
						</template>
					</tm-listitem>
					
				</tm-sheet>
				<tm-sheet :shadow="24">
					<view class="text-size-s text-weight-b mb-24">个性化应用</view>
					
					<tm-avatar :size="150" dot :shadow="4" >
						<template v-slot:dot>
							<tm-badges label="99" :dot='false'></tm-badges>
						</template>
					</tm-avatar>
					<tm-avatar dot-pos="bottom" :size="150" dot :shadow="4" >
						<template v-slot:dot>
							<tm-badges :offset="[0,-15]" label="99" :dot='false'></tm-badges>
						</template>
					</tm-avatar>
					
					<tm-avatar dot-pos="bottom" :size="150" dot :shadow="4" >
						<template v-slot:dot>
							<view class="text-align-center orange round-10 text-size-xs py-20" style="width: 60%; margin: auto;margin-bottom: -15upx;">
								VIP
							</view>
						</template>
					</tm-avatar>
					
				</tm-sheet>
			</view>
		</template>
	</tm-fullView>
	

</template>

<script>
	import tmFullView from "@/tm-vuetify/components/tm-fullView/tm-fullView.vue"
	import tmMenubars from "@/tm-vuetify/components/tm-menubars/tm-menubars.vue"
	import tmSheet from "@/tm-vuetify/components/tm-sheet/tm-sheet.vue"
	import tmAvatar from "@/tm-vuetify/components/tm-avatar/tm-avatar.vue"
	import tmBadges from "@/tm-vuetify/components/tm-badges/tm-badges.vue"
	import tmListitem from "@/tm-vuetify/components/tm-listitem/tm-listitem.vue"
	export default {
		components:{tmFullView,tmMenubars,tmSheet,tmAvatar,tmBadges,tmListitem},
		data() {
			return {
				avatrUrl:'https://picsum.photos/200'
			}
		},
		methods: {
			
			hcangeimg(){
				let url = 'https://mockapi.eolinker.com/Uj8WNQX0d65502098df8ecc1f06348d7aac9364b4d08923/my/upload';
				let t = this;
				this.$tm.upload.chooseImgUpload(1,url,{},null,(fileObj)=>{
					t.avatrUrl = fileObj.url
				})
			}
		}
	}
</script>

<style>

</style>
